@import './theme.scss';
/**app.wxss**/
@mixin rightI{
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  margin-bottom: 3rpx;
 
}
Page {
  font-size: 30rpx;
}

.view-hover {
  background: rgba(0, 0, 0, 0.1);
	opacity: 0.7;
}

/*flex布局*/
.flex {
	display: flex;
}
.flex1 {
	flex: 1;
}
.flex-column{
	display: flex;
	flex-direction: column;
}
.flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}
.flex-wrap {
	display: flex;
	flex-wrap: wrap;
}
.justify-center {
	display: flex;
	justify-content: center;
}
.justify-end {
	display: flex;
	justify-content: flex-end;
}
.flex-shrink-zero{
	flex-shrink: 0;
}
.justify-between {
	display: flex;
	justify-content: space-between;
}
.align-center {
	display: flex;
	align-items: center;
}
.align-end {
	display: flex;
	align-items: flex-end;
}
.align-start {
	display: flex;
	align-items: flex-start;
}
.align-between{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.text-align-center{
	text-align: center;
}

.text-align-right{
	text-align: right;
}

/*线共用*/
.border-across1{
  margin: 0 30rpx;
  border-top: 1rpx solid #eee;
}

/*横幅提示（共用）*/
.banner-hint-body{
  height: 60rpx;
  .banner-hint{
    background: rgba(250, 210, 198, 0.9);
    height: 60rpx;
    text-align: center;
    line-height: 60rpx;
    color: rgba(255, 61, 70, .8);
    font-size: 26rpx;
    position: fixed;
    width: 100vw;
    z-index: 10;
    top: 0;
  }
}

/*共用字体大小*/
$f-s: ( 18, 20, 22, 24, 26, 28, 30, 34, 36, 40, 42, 48, 60, 72, 94 );
@for $i from 1 through length($f-s) {
  $item: nth($f-s, $i);
  .font-size#{$item} {
    font-size: #{$item}rpx;
    line-height:  #{$item}rpx;
  }
}

/*骨架屏全局样式*/
.skeleton{
  overflow: hidden;
}

/*链接样式*/
.link-active:active, .link-hover{
  opacity: 0.6;
}

.b-cfff {
  background: #fff;
}

.t-c {
  text-align: center;
}

.t-l {
  text-align: left;
}

.t-r {
  text-align: right;
}

.f-l {
  float: left;
}

.f-r {
  float: right;
}

.d-i-b {
  display: inline-block;
}

/*文本自动换行*/
.pre {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

/*不换行*/
.no-pre {
  white-space: nowrap;
}

/*文字太宽加....*/
.add-dot {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display: block;
}
.add-dot2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/*共用tab菜单*/
.tab-menu{
  border-bottom: 4rpx solid #f3f4f6;
  display: flex;
  height: 80rpx;
  font-size: 28rpx;
  background: #fff;
  z-index: 1;
  > view{
    flex: 1;
    text-align: center;
    position: relative;
    height: 80rpx;
    line-height: 80rpx;
    &.active{
      color: #242424;
      font-size: 30rpx;
      position: relative;
      font-weight: 500;
      &::after{
        content: '';
        position: absolute;
        bottom: 0;
        width: 30rpx;
        background: #FFD426;
        height: 6rpx;
        left: 50%;
        margin-left: -15rpx;
        border-radius: 6rpx;
      }
    }
  }
}

/*共用商品列表*/
.item-view{
  padding: 10rpx 0;
  margin: 0 30rpx;
  >.item{
    position: relative; //售后页面
    > navigator, > .no-nav{
      position: relative; //售后页面
      display: flex;
      // padding: 30rpx;
      > view{
        flex: 1;
      }
    }
    //checked 购物车用 start
    .checked{
      flex: initial !important;
      width: 60rpx;
      height: 34rpx;
      margin-top:54rpx;
      > image{
        width: 38rpx;
        height: 38rpx;
      }
    }
    //checked 购物车用 end
    .img{
      flex: initial !important;
      width: 180rpx;
      position: relative;
      >.mark{
        position: absolute;
        top: 8rpx;
        left: 8rpx;
        overflow: hidden;
        text{
          color: #fff;
          width: 36rpx;
          height: 36rpx;
          line-height: 36rpx;
          text-align: center;
          border-top-left-radius: 36rpx;
          border-bottom-left-radius: 36rpx;
          border-bottom-right-radius: 36rpx;
          font-size: 22rpx;
          float: left;
          margin-right: 4rpx;
          &.is-presale{
            background: #FFA349;
          }
          &.is-gb-order{
            background: #F570BA;
          }
        }
      }
      >image, >.image{
        width: 170rpx;
        height: 170rpx;
        background-color: #f3f4f6;
        float: left;
        border-radius: 6rpx;
      }
    }
    .content{
      font-size: 26rpx;
      .title{
        font-size: 30rpx;
        margin-bottom: 8rpx;
        color: #242424;
        overflow: hidden;
        >.present{
          width: 56rpx;
          text-align: center;
          font-size: 22rpx;
          line-height: 30rpx;
          float: left;
          position: relative;
          color: #F3A332;
          border-radius: 4rpx;
          margin: 6rpx 6rpx 0 0;
          &::after{
            transform: scale(0.5);
            border: 1px solid #F3A332;
            transform-origin: 0 0;
            display: flex;
            box-sizing: border-box;
            content:' ';
            position: absolute;
            top:0;
            left: 0;
            width: 200%;
            height: 200%;
            border-radius: 12rpx;
          }
        }
        > text{
          font-size: 30rpx;
          vertical-align: middle;
        }
        > .icon-tag{
          vertical-align: middle;
          margin-right: 6rpx;
          overflow: hidden;
          font-size: 22rpx;
          line-height: 28rpx;
          color: #fff;
          display: inline-block;
          height: 28rpx;
          text-align: center;
          border-radius: 4rpx;
          padding: 2rpx 6rpx;
          background-color: #FF6010;
          position: relative;
        }
      }
      .label{
        overflow: hidden;
        margin-bottom: 25rpx;
        > text{
          float: left;
          color: #00AE66;
          font-size: 26rpx;
          padding: 0 6rpx;
          margin: 0 8rpx 10rpx 0;
          position: relative;
          &::after{
            transform: scale(0.5);
            border: 1px solid #00AE66;
            transform-origin: 0 0;
            display: flex;
            box-sizing: border-box;
            content:' ';
            position: absolute;
            top:0;
            left: 0;
            width: 200%;
            height: 200%;
            border-radius: 12rpx;
          }
          &.tips-price{
            background-color:#F2FFF2;
          }
          &.frame{
            color: #A5A5A5;
            &::after{
              border: 1px solid #A5A5A5;
            }            
          }
          &.min-num{
            color: #FF6868;
            &::after{
              border: 1px solid #FF6868;
            }  
          }
        }
      }
      .price-unit{
        color: #FF6868;
        font-size: 30rpx;
        >.price{
          font-weight: bold;
        }
        > text{
          color: #A5A5A5;
          font-size: 24rpx;
        }
        >.price-origin{
          color: #C7C7C7;
          font-size: 24rpx;
          text-decoration: line-through;
          display: block;
        }
        .original{
          font-size: 20rpx;
          color: #C7C7C7;
          text-decoration: line-through;
          margin-left: 8rpx;
        }
      }
      //数量价格 下单、订单列表、订单详情用 start
      .num-price{
        text-align: right;
        margin-top:54rpx;
        font-size: 26rpx;
        position: absolute;
        bottom: 28rpx;
        right: 30rpx;
        >.num-str{
          color: #A5A5A5;
          margin-right: 32rpx;
        }
        >.price-str{
          color: #242424;
        }
      }
      //数量价格 下单、订单列表、订单详情用 end
    }

    .join{
      text-align: right;
      position: absolute;
      bottom: 22rpx;
      right: 25rpx;
      height: 54rpx;
      .repertory{
        color:#A5A5A5;
        font-size:20rpx;
        margin-top: 5rpx;
      }
    }
  }
}

/*优惠券共用*/
.coupon-body{
  padding-top: 20rpx;
  >.coupon-item{
    overflow: hidden;
    position: relative;
    margin: 0 30rpx 20rpx;
    min-height: 148rpx;
    border-radius: 4rpx;
    //不使用优惠券
    &.need-not{
      min-height: 110rpx;
      line-height: 110rpx;
      background: #fff;
      color: #242424;
      padding: 0 30rpx;
    }
    &.white-bg{
      background: #fff;
    }
    &.unusable{
      >.content, >.bottom{
        opacity: 0.3;
      }
    }
    >.bg-img{
      width: 100%;
      height: 251rpx;
      position: absolute;
      z-index: -1;
    }
    >.status-img{
      position: absolute;
      right: 0;
      top: 0;
      width: 150rpx;
      height: 87rpx;
    }
    >.content{
      display: flex;
      height: 148rpx;
      align-items: center;
      >.left{
        flex: initial;
        width: 200rpx;
        text-align: center;
        >.price{
          font-size: 48rpx;
          font-weight: bold;
        }
        >.hint{
          color: #A5A5A5;
          font-size: 22rpx;
        }
      }
      >.right{
        flex: 1;
        padding-left: 30rpx;
        >.title{
          color: #242424;
          margin-bottom: 10rpx;
          font-weight: bold;
        }
        >.date{
          color: #A5A5A5;
          font-size: 20rpx;
        }
      }
    }
    >.bottom{
      color: #A5A5A5;
      font-size: 24rpx;
      margin-top: 3rpx;
      padding: 14rpx 30rpx 6rpx;
      >text{
        display: block;
        padding-bottom: 8rpx;
      }
    }
  }
}

/*加载更多，无数据*/
.load-more, .load-none {
  text-align: center;
  color: #999;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 12px;
}

.load-none {
  margin-top: 96rpx;
}

/*底部操作按钮*/
.option-bottom{
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  padding: 20rpx 30rpx;
  background-color: #fff;
  /* border-top: 1rpx solid #f3f4f6; */
  z-index: 1;
  button{
    background: #00AE66;
    font-size: 30rpx;
    color: #fff;
    &:active{
      opacity: 0.7;
    }
  }
}

/*共用btn*/
.btn1{
  background: #FDCA1F;
  font-size: 36rpx;
  color: #fff;
  &:active{
    opacity: 0.7;
  }
  &::after{
    border: 0;
  }
}

.btn2{
  background: #FDCA1F;
  color: #fff;
  &:active{
    opacity: 0.7;
  }
  &::after{
    border: 0;
  }
}

.btn3{
  background: #fff;
  color: #A5A5A5;
  border-radius: 54rpx;
  height: 54rpx;
  line-height: 54rpx !important;
  &:active{
    opacity: 0.7;
  }
  &::after{
    border: 1rpx solid #A5A5A5;
    border-radius: 54rpx;
  }
}
.btn4{
  background: #FF6868;
  color: #fff;
  border-radius: 54rpx;
  height: 54rpx;
  line-height: 54rpx !important;
  &:active{
    opacity: 0.7;
  }
  &::after{
    border: 1rpx solid #FF6868;
    border-radius: 54rpx;
  }
}

/*==============按钮共用=================*/
//共用
.btn-primary, .btn-green, .btn-orange, .btn-red, .btn-white, .btn-white2{
  text-align: center;
  &[disabled]{
    color: #fff !important;
    background: #BCC4C0 !important;
    &:active{
      opacity: 1;
    }
  }
  &:active{
    opacity: 0.7;
  }
  &::after{
    border: 0;
  }
}
//主要的
.btn-primary{
  background: $--color-primary;
  color: #fff;
}
//绿色的
.btn-green{
  background: #00AE66;
  color: #fff;
}
//橙色的
.btn-orange{
  background: #f7881b;
  color: #fff;
}
//红色的
.btn-red{
  color: #fff;
  background: #FF6262;
}
//白色的
.btn-white{
  color: $--color-primary;
  background: #fff;
  border: 1rpx solid $--color-primary;
}
//白色的(无框线)
.btn-white2{
  color: $--color-primary;
  background: #fff;
}

/*==============按钮大小=================*/
.btn-size-circle-88{
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  font-size: 30rpx;
}
.btn-size-circle-60{
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
}
/*================按钮阴影=================*/
.btn-box-shadow1{
  box-shadow: 0 4rpx 12rpx 0 rgba(65, 126, 255, 0.4);
}

/*共用input-item*/
.input-item {
  display: flex;
  border-bottom: 1rpx solid #eee;
  align-items: center;
  font-size: 28rpx;
  padding: 35rpx 0;
  margin: 0 30rpx;
  > view {
    flex: 1;
  }
  > .title {
    color: #808080;
    flex: initial !important;
    min-width: 160rpx;
  }
  > .content {
    text-align: right;
    color: #242424;
    .right-img{
      width: 15rpx;
      height: 25rpx;
      margin-left: 15rpx;
      position: relative;
      top: 2rpx;
    }
  }
  input {
    height: 84rpx;
    line-height: 84rpx;
  }
}

/*共用价格*/
.price{
  color: #FF6868;
}

/* 背景默认图 */
.bg-img-container-banner {
  background-image: url("");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.bg-img-container-item {
  background-image: url("");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.bg-img-container-item-large {
  background-image: url("");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.bg-img-container-store {
  background-image: url("");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}


.vip_card{
  font-size: 18rpx;
}
.vip_card--price{
   color: #01B8FF;
}
.price_type--1{
  color: #D79E5C !important;
}
.price_type--2{
  color: #828893 !important;
}
.price_type--3{
  color:#FDBD1C !important;
}
.price_type--4{
  color: #01B8FF !important;
}
.vip_card--type{
  display: inline-block;
 background-image: linear-gradient(-41deg, #76D6FD,  #01B8FF,#9AE2FF);
  color:white;
  padding:2rpx 8rpx;
}
.card_type--1{
   background-image: linear-gradient(-41deg,   #F9CB85 0%, #AD6629 100%) !important;
      box-shadow: inset 0 1rpx 3rpx 0 #A37044 !important;
}
.card_type--2{
  background-image: linear-gradient(-41deg, #EDEEF0 0%, #808691 100%) !important;
  box-shadow: inset 0 1rpx 3rpx 0 #FDC126 !important;
}
.card_type--3{
  background-image: linear-gradient(-41deg, #FDBD1C 0%, #FFE800 100%) !important;
}
.card_type--4{
background-image: linear-gradient(-41deg, #76D6FD, #01B8FF, #9AE2FF);

}

 .right_i--F59725{
  border: solid #F59725;
  @include rightI;
    }

 .right_i--989797{
  border: solid #989797;
  @include rightI;
    }